<template>
  <div class="box">
    <RouteTitle isBack />
    <div class="content">
      <a-space :size="15">
        <a-button ghost type="primary" style="border: 1px solid #e0e0e6; color: #000; border-radius: 6px"
          @click="isAllCheckClick">
          {{ isAllCheck ? "全不选" : "全选" }}
        </a-button>
        <a-popover placement="bottom">
          <template #content>
            <div>
              <a-button type="text" :disabled="isCheckBox.length ? false : true" @click="releaseClick('scan')">
                扫码发布
              </a-button>
            </div>
            <div>
              <a-button type="text" :disabled="isCheckBox.length ? false : true" @click="releaseClick()">
                自动发布
              </a-button>
            </div>
          </template>
        </a-popover>
        <a-dropdown :placements="bottomRight">
          <template #overlay v-if="isCheckBox.length">
            <a-menu style="margin-left: 80px">
              <a-menu-item :key="account.key" v-for="(account, index) in accountList">
                <div class="account_item" @click="handleMenuClick('scan', account)">
                  <img :src="account.image" alt="" /><span>{{
                    account.value
                  }}</span>
                </div>
              </a-menu-item>
            </a-menu>
          </template>
          <a-button type="primary" style="border: none; border-radius: 6px"
            :class="isCheckBox.length ? '' : 'button-disabled'">
            矩阵发布
            <DownOutlined />
          </a-button>
        </a-dropdown>
        <!-- <a-button type="primary" style="border: none; border-radius: 6px"
					:class="isCheckBox.length ? '' : 'button-disabled'" @click="releaseClick()">
					项目发布
				</a-button> -->
        <a-button v-if="synthesisList?.length && !synthesisList[0]?.image_ary" ghost type="primary"
          style="border: 1px solid #e0e0e6; color: #000; border-radius: 6px"
          :class="isCheckBox.length ? '' : 'button-disabled'" @click="batchDownload">
          批量下载
        </a-button>
      </a-space>
      <div :wrap="false" class="content-box">
        <div class="left_content">
          <div style="margin-bottom: 20px">共{{ pageInfo.total }}条成片</div>
          <a-spin tip="加载中..." :spinning="spinning">
            <div class="a_row">
              <!-- <a-col  v-for="(item, index) in synthesisList" :key="index"> -->
              <div class="a_col_item" v-for="(item, index) in synthesisList" :key="index">
                <!-- <div class="a_col_item"  v-for="(item, index) in data" :key="index"> -->
                <div class="image-box">
                  <div class="image">
                    <video v-if="!item?.image_ary" :src="item.material_url" style="width: 160px; height: 284px" />
                    <img v-else :src="item.image_ary[0]" alt="" />
                    <div class="image-time">{{ item.material_name }}</div>
                    <div class="is_used" v-if="item?.image_ary">
                      {{ item?.is_used ? "已使用" : "未使用" }}
                    </div>

                    <div class="image_type_icon" v-if="item?.image_ary">
                      图集
                      <cu-icon class="icon" type="icon-tupian2" style="font-size: 14px; cursor: pointer" />
                    </div>
                    <div class="image_type_icon" v-else>
                      视频
                      <cu-icon class="icon" type="icon-play" style="font-size: 14px; cursor: pointer" />
                    </div>

                    <div class="image_num" v-if="item?.image_ary">
                      图片数量：{{ item.image_ary?.length }}
                    </div>
                    <div class="image-mask" @click="previewImg(item)">
                      <cu-icon class="icon" type="icon-play" style="font-size: 50px; cursor: pointer" />
                    </div>
                    <span class="has_used" v-if="item?.is_used == 1">已使用</span>
                    <a-checkbox v-model:checked="item.checked" v-if="item?.is_used !== 1" @change="checkedChange"
                      class="checkbox"></a-checkbox>
                  </div>
                  <div class="bottom_con">{{ item?.material_name }}</div>
                </div>
              </div>
            </div>
            <div style="text-align: right; margin-top: 10px" v-if="pageInfo.total">
              <a-pagination v-model:current="pageInfo.current" :total="pageInfo.total" @change="handlePageChange"
                show-less-items />
            </div>
          </a-spin>
        </div>
        <div style="margin: 0 20px">
          <a-divider type="vertical" style="height: 100%; border-color: #efeff5" />
        </div>
        <div class="right-content">
          <div class="text">
            已选{{ synthesisList.filter((item) => item.checked)?.length }}条成片
          </div>
          <div v-if="synthesisList.filter((item) => item.checked)?.length">
            <div :span="24" class="list" v-for="(item, index) in synthesisList.filter(
              (item) => item.checked
            )">
              <div style="margin-bottom: 5px">
                项目名称：{{ item.merchant_library_name }}
              </div>
              <div style="margin-top: 5px">
                成片名称： {{ item.material_name }}
              </div>
            </div>
          </div>
          <a-empty v-else />
        </div>
      </div>
    </div>

    <!-- 预览图片 -->
    <PreviewImg :visible="visibleImage" @onCancel="visibleImage = false" :url="previewImgUrl" :title="previewTitle"
      :type="'video'" />

    <!-- 导出弹框 -->
    <ExportMdal :visible="visibleExport" @cacel="visibleExport = false" />
    <swiperPreview :visible="swiperVisible" :coverArr="imageArr" @close="(swiperVisible = false), (imageArr = [])" />
  </div>
</template>

<script>
import {
  defineComponent,
  reactive,
  toRefs,
  computed,
  watch,
  createVNode,
  ref,
  nextTick,
} from "vue";
import { useRoute, useRouter } from "vue-router";
import { EyeFilled, DownOutlined } from "@ant-design/icons-vue";
import PreviewImg from "../../../components/PreviewModal/index.vue";
import ExportMdal from "../components/ExportMdal/index.vue";
import swiperPreview from "../MaterialCenter/swiperPreview.vue";
import request from "../../../common/utils/request";
import { message } from "ant-design-vue";
export default defineComponent({
  name: "Synthesis",
  components: {
    PreviewImg,
    ExportMdal,
    swiperPreview,
    DownOutlined,
  },
  setup() {
    const route = useRoute();
    const router = useRouter();

    const state = reactive({
      count: 0,
      previewTitle: "",
      previewImgUrl: "",
      visibleImage: false,
      checked: false,
      page: 1,
      visibleExport: false,
      synthesisList: [],
      isCheckBox: [],
      isAllCheck: false,
      spinning: false,
      pageInfo: {
        pageSize: 12,
        current: 1,
        total: 0,
      },
      swiperVisible: false,
      imageArr: [],
      accountList: [],
    });

    // 			const data = [
    // 			{
    // 				"id": 11,
    // 				"multimedia_id": 84,
    // 				"shotstack_response_id": 248,
    // 				"material_type": "video",
    // 				"material_name": "混剪项目2024.5.10 15:12:58_248171.mp4",
    // 				"material_url": "https://bailing-1305744786.cos.ap-nanjing.myqcloud.com/upload/shotstack/video/1/2/647455148205518848_647455148205518848_1.mp4",
    // 				"image_text_clip": null
    // 			},
    // ]

    const previewImg = (item) => {
      if (item?.image_ary && item?.image_ary?.length) {
        state.swiperVisible = true;
        state.imageArr = item?.image_ary;
        return;
      }
      state.previewTitle = item.material_name;
      state.previewImgUrl = item.material_url;
      state.visibleImage = true;
    };
    // 获取发布成片平台下拉列表
    const getAccountList = () => {
      request
        .get("/work_ai", "/org/platform/account/shotStackList", {
          filterShow: 1, //是否过滤掉没有对接的平台 1-是 0-不是
        })
        .then((res) => {
          console.log(res);
          state.accountList = res.result;
        });
    };
    getAccountList();

    // 发布按钮
    const releaseClick = (text) => {
      if (!state.isCheckBox.length) {
        return;
      }
      let idsArray = state.isCheckBox.map((i) => i.merchant_library_id);
      if (idsArray.some((value, index) => value !== idsArray[0])) {
        return message.warning("不允许多个项目的成片同时发布");
      }
      if (text) {
        //	扫码发布
        const query = {
          ids: state.isCheckBox.map((i) => i.multimedia_id),
          merchant_library_id: state.isCheckBox[0].merchant_library_id,
          choose: "2",
          // 判断是视频成片还是图集成片
          material_type: state.isCheckBox[0].material_type,
        };
        // 扫码发布
        router.push({
          name: "AutoRelease",
          query,
        });

        return;
      }
      // 自动发布
      router.push({
        name: "AutoRelease",
      });
    };
    // 跳转页面  / 判断
    const handleMenuClick = (text, account) => {
      if (!state.isCheckBox.length) {
        return;
      }
      let idsArray = state.isCheckBox.map((i) => i.merchant_library_id);
      if (idsArray.some((value, index) => value !== idsArray[0])) {
        return message.warning("不允许多个项目的成片同时发布");
      }
      if (text) {
        //	扫码发布
        const query = {
          ids: state.isCheckBox.map((i) => i.multimedia_id),
          merchant_library_id: state.isCheckBox[0].merchant_library_id,
          choose: "2",
          // 判断是视频成片还是图集成片
          material_type: state.isCheckBox[0].material_type,
        };
        // 扫码发布
        router.push({
          name: "AutoRelease",
          query: {
            ...query,
            platform: account.key,
          },
        });
        return;
      }
      // 自动发布
      router.push({
        name: "AutoRelease",
        query: {
          ...query,
          platform: account.key,
        },
      });
    };

    // 批量下载
    const batchDownload = () => {
      if (!state.isCheckBox.length) {
        return;
      }
      uploadFileCheckd();
    };

    const uploadFileCheckd = () => {
      let ids = [];
      state.synthesisList.forEach((item) => {
        if (item.checked) {
          ids.push(item.multimedia_id);
        }
      });
      if (ids.length) {
        request
          .put("/work_ai", "/user/shotstack/media/download", {
            ids,
          })
          .then((res) => {
            state.visibleExport = true;
          });
      }
    };

    // 复选框change
    const checkedChange = () => {
      state.isCheckBox = state.synthesisList.filter((item) => item.checked);
    };

    const isAllCheckClick = () => {
      state.isAllCheck = !state.isAllCheck;
      if (state.isAllCheck) {
        state.synthesisList.forEach((item) => {
          item.checked = true;
        });
      } else {
        state.synthesisList.forEach((item) => {
          item.checked = false;
        });
      }
      state.isCheckBox = state.synthesisList.filter((item) => item.checked);
    };

    const getSynthesisList = () => {
      let params = {};
      Object.assign(params, state.pageInfo);
      params.id = route.query?.detail_id;
      params.page = state.pageInfo.current;
      request
        .get("/work_ai", "/user/shotstack/multimedia/list", params)
        .then((res) => {
          if (res.result.data) {
            state.synthesisList = res.result.data;
            state.pageInfo.total = res.result.total;
          }
          if (res.result && res.result?.length) {
            state.synthesisList = res.result;
          }
        });
    };

    const handlePageChange = (page, pageSize) => {
      state.isAllCheck = false;
      state.pageInfo.current = page;
      state.pageInfo.pageSize = pageSize;
      getSynthesisList();
    };

    if (route.query?.detail_id) {
      getSynthesisList();
    }

    return {
      ...toRefs(state),
      previewImg,
      releaseClick,
      batchDownload,
      checkedChange,
      isAllCheckClick,
      handlePageChange,
      getAccountList,
      handleMenuClick,
    };
  },
});
</script>

<style lang="less" scoped>
.box {
  .button-disabled {
    cursor: not-allowed;
    opacity: 0.6;
  }

  .content {
    width: 100%;
    background: rgba(255, 255, 255, 0.4);
    margin-top: 20px;
    padding: 20px;

    .content-box {
      padding: 20px 0;
      width: 100%;
      display: flex;

      .right-content {
        min-width: 550px;
        width: 40%;

        .text {
          width: 100%;
          text-align: right;
        }

        .list {
          width: 100%;
          margin: 2px 0;
          padding: 10px;
          border-radius: 10px;
          background: rgba(255, 255, 255, 0.6);
          border: 1px solid #efeff5;
        }
      }

      .left_content {
        flex: 1;

        .a_row {
          flex: 1;
          display: flex;
          flex-wrap: wrap;
          justify-content: flex-start;
          gap: 15px;

          .a_col_item {
            .image-box {
              .bottom_con {
                display: inline-block;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                width: 160px;
              }

              .image {
                width: 160px;
                height: 284px;
                background: #000;
                border-radius: 4px;
                position: relative;
                margin-bottom: 5px;
                display: flex;
                align-items: center;
                justify-content: center;

                img {
                  max-width: 160px;
                  max-height: 284px;
                }

                .is_used {
                  position: absolute;
                  right: 10px;
                  top: 10px;
                  color: #fff;
                }

                .image_num {
                  position: absolute;
                  left: 10px;
                  bottom: 5px;
                  color: #fff;
                }

                .image_type_icon {
                  position: absolute;
                  left: 10px;
                  bottom: 30px;
                  color: #fff;
                }

                .image-mask {
                  position: absolute;
                  top: 0px;
                  left: 0px;
                  width: 160px;
                  height: 284px;
                  border-radius: 4px;
                  background: rgba(0, 0, 0, 0.4);
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  cursor: pointer;
                  opacity: 0;
                  color: #fff;

                  .icon-eye-filled {
                    font-size: 24px;

                    &:hover {
                      color: #2878ff;
                    }
                  }
                }

                &:hover {
                  .image-mask {
                    opacity: 1;
                  }
                }
              }

              .checkbox {
                position: absolute;
                top: 10px;
                left: 15px;
              }

              .has_used {
                position: absolute;
                top: 10px;
                left: 5px;
                color: #fff;
                background: rgba(0, 0, 0, 0.8);
                border-radius: 5px;
                padding: 4px;
              }

              .image-name {
                word-wrap: break-word;
              }

              .image-time {
                text-align: center;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
              }
            }
          }
        }
      }
    }
  }
}

// 发布成片下拉样式
.account_item {
  width: 100px;
  height: 30px;
  display: flex;
  align-items: center;
  padding: 3px, 10px;

  img {
    margin-right: 5px;
    width: 20px;
    height: 20px;
  }
}
</style>
